<template>
	<view>
		<custom-tabs type="c1" :value="value" :animation="true" :defaultTextStyle="{'color':'blue'}" :activeTextStyle="{color:'red','font-weight':700}" :activeLineStyle="{'background-color':'red',height:'10rpx'}" @change="changeIndex">
			<custom-tab-pane label="标签一" name="c1_1">
				<view style="height: 100px;">内容0</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
			</custom-tab-pane>
			<custom-tab-pane label="标签二" name="c1_2">内容2</custom-tab-pane>
			<custom-tab-pane label="标签三3" name="c1_3" style="text-align: center;">内容3</custom-tab-pane>
			<custom-tab-pane label="标签四44" name="c1_5">内容4</custom-tab-pane>
			<custom-tab-pane label="标签五555" name="c1_5">内容5</custom-tab-pane>
			<custom-tab-pane label="标签六6666" name="c1_6">内容6</custom-tab-pane>
			<custom-tab-pane label="标签七77777" name="c1_7">内容7</custom-tab-pane>
		</custom-tabs>
	</view>
</template>
<script setup>
	import { reactive, ref, watch } from 'vue';
	const value = ref(2);

	function changeIndex(e) {
		console.log('选中:', e)
	}
</script>
<script>
	// #ifdef VUE2
	export default {
		data() {
			return {
				value: 2
			}
		},
		methods: {
			changeIndex(e) {
				console.log('选中:', e)
			}
		}
	}
	// #endif
</script>
